<template>
	<div class="tmpl">
		<div class="row" v-for="(item,index) in datalist" :key=item.id>
			<mt-switch @change="changeStatu(item.id,$store.getters.getGoodsStatu[item.id])" class="switch" v-model="$store.getters.getGoodsStatu[item.id]"></mt-switch>
			<img class="img" :src="item.thumb_path" alt="商品图片" >
			<div class="inforight">
				<h4 v-text="item.title"></h4>
				<div class="bottom">
					<ul>
						<li>￥{{item.sell_price}}</li>
						<li><carinputnumber :id="item.id" :max="item.stock_quantity" :quantity="$store.getters.getGoodsCount[item.id]"></carinputnumber></li>
						<li><a href="javascript:void(0)" @click="deleteGood(item.id,index)">删除</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="total">
			<div class="desc">
				<ul>
					<li>总计（不含运费）</li>
					<li>已勾选商品{{$store.getters.getTotalGoods.number}}件,总价:￥{{$store.getters.getTotalGoods.price}}元</li>
				</ul>
			</div>
			<div id="button">
				<mt-button  type="danger" size="small">去结算</mt-button>
			</div>
		</div>
	</div>
</template>
<script>
	import common from "../../statics/js/common.js";
    import carinputnumber from "./subcom/numberBox_car.vue";
    export default{
        components: {
            carinputnumber
        },
        data(){
            return {
                datalist:[]
            }
        },
        created(){
           this.getGoodList();
        },
        methods:{
			getGoodList(){
				let arr = [];
				this.$store.state.list.forEach(item=>{
					arr.push(item.id)
				});
				this.$http.get(common.domain+'/api/goods/getshopcarlist/'+arr.join(',')).then(res=>{
					if(res.body.status !=0){
						this.$toast(res.body.message);
						return;
					}
					this.datalist = res.body.message;
				})
			},
            changeStatu(id,val){
                console.log(val);
                this.$store.commit('changeStatus',{
					id:id,
					selected:val
				})
            },
            deleteGood(id,index){
				this.datalist.splice(index,1);
                this.$store.commit('removeGoods',id);
            }
        }
    }
</script>
<style lang="scss" scoped>
	.row{
		border-bottom: 1px solid rgba(0,0,0,0.3);
		height: 102px;
		display: flex;
		padding: 5px;
	}

	.switch{
		flex:0 0 52px;
	}

	.img{
		margin-left: 5px;
		height: 75px;
		width: 75px;
		flex: 0 0 85px;
	}

	.inforight{
		margin-left: 5px;
		flex:1;
	}
	.inforight ul{
		padding-left: 0px;
	}
	.inforight li{
		list-style: none;
		display: inline-block;
	}

	.inforight h4{
		color: #0094ff;
		font-size: 14px;
	}

	.bottom li:first-child{
		color:red;
		margin-right: 5px;
	}

	.bottom li:last-child{
		margin-left: 5px;
	}
	#total{
		height: 100px;
		background-color: rgba(0,0,0,0.1);
		display: flex;
		padding: 5px;;
	}

	#total ul {
	 padding-left: 0px;
	}
	#total li{
		list-style: none;
		font-size: 14px;
	}

	#button{
		flex:0 0 60px;
		margin: 30px 0 0 0 ;
	}

	.desc{

		flex:1;
	}
</style>
